<template>
  <view class="customCount">
    <view @click="decrement" class="decre">-</view>
    <view class="val">{{ value }}</view>
    <view @click="increment" class="incre">+</view>
  </view>
</template>
<script>
export default {
  name: "Count",
  props: {
    min: {
      type: Number,
      default: 1,
    },
    max: {
      type: Number,
      default: 100000,
    },
    value: {
      type: Number,
      default: 1,
    }
  },
  methods: {
    decrement() {
      if (this.value > this.min) {
        this.$emit('input', this.value - 1);
      }
    },
    increment() {
      if (this.value < this.max) {
        this.$emit('input', this.value + 1);
      }
    },
  },
}
</script>


<style lang="scss">
.customCount {
  display: inline-flex;

  .val {
    text-align: center;
    font-size: 16px;
    width: 30px;
  }

  .decre {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    font-size: 16px;
    background-color: #F6F6F6;
    color: #95949D;
  }

  .incre {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    font-size: 16px;
    background-color: #F6F6F6;
    color: #95949D;
  }
}
</style>